<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
	<title>AiDex Sharp 快速开发平台-登录页面</title>
	<link rel="stylesheet" type="text/css" href="/static/regist/css/style.css">
	<link rel="icon" href="/static/regist/img/favicon.ico">
	<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
	<script src="https://kit.fontawesome.com/a81368914c.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	
</head>
<body>
	<img class="wave" src="/static/regist/img/wave.png">
	<div class="container">
		<div class="img">
			<img src="/static/regist/img/bg.svg">
		</div>
		<div class="login-content">
			<form class="" action="/user/register" method="post">
				<img style="border: 1px solid #d5d5d5;border-radius: 8px;" src="/static/regist/img/logo.svg">
				<h2 class="title" style="font-size: 36px;">若依-AiDex Sharp</h2>
           		<div class="input-div one">
           		   <div class="i">
           		   		<i class="fas fa-user"></i>
           		   </div>
           		   <div class="div">
           		   		<h5 id="name_msg">用户名</h5>
           		   		<input id="name" autofocus name="name" type="text" class="input">
           		   </div>
           		</div>
           		<div class="input-div pass">
           		   <div class="i">
           		    	<i class="fas fa-lock"></i>
           		   </div>
           		   <div class="div">
           		    	<h5 id="pass_msg">密码</h5>
           		    	<input id="pass" name="pass" type="password" class="input">
            	   </div>
            	</div>
				<div class="input-div pass">
					<div class="i">
						<i class="fas fa-lock"></i>
					</div>
					<div class="div">
						<h5 id="repass_msg">确认密码</h5>
						<input id="repass" type="password" class="input">
					</div>
				</div>
            	<input type="submit"  class="btn" value="注册">
				<p id="errorMessage" class="error" style="display:none;"></p>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="/static/regist/js/main.js"></script>
	<script src="/static/layui/layui.js"></script>
	<script>
		layui.use(function(){
			var $ = layui.$;
			$("#name").blur(function (){
				$.ajax({
					url:"/user/checkUserNameUnique",
					type:"post",
					data:{name:$("#name").val()},
					dataType:"text",
					success:function (data) {
						if (data == "true"){
							console.log(data);
							$("#name_msg").html("");
							$("input[type=submit]").attr("disabled",false).css("background-color","dodgerblue");
						} else {
							$("#name_msg").html("用户名已存在").css("color","red");
							$("input[type=submit]").attr("disabled",true).css("background-color","#ccc");//#ccc为灰色
						}
					}
				})
			});
			/*$("#repass").blur(function () {
				$.ajax({
					url:"/user/checkUserPassMatch",
					type:"post",
					data:{pass:$("#pass").val(),repass:$("#repass").val()},
					dataType:"text",
					success:function (data) {
						if(data == "true"){
							console.log(data);
							$("#pass_msg").html("");
							$("#repass_msg").html("");
							$("input[type=submit]").attr("disabled",false).css("background-color","dodgerblue");
						} else {
							$("#pass_msg").html("密码不一致").css("color","red");
							$("input[type=submit]").attr("disabled",true).css("background-color","#ccc");
						}
					}
				})
			});*/
			$("#repass").blur(function () {
				var pass = $("#pass").val();
				var repass = $("#repass").val();
				if(pass == repass){
					$("#pass_msg").html("");
					$("#repass_msg").html("");
					$("input[type=submit]").attr("disabled",false).css("background-color","dodgerblue");
				} else {
					$("#pass_msg").html("密码不一致，请重新输入").css("color","red");
					$("input[type=submit]").attr("disabled",true).css("background-color","#ccc");
				}
			});
			// 表单提交
			$('#registerButton').click(function() {
				const name = $('#name').val();
				const pass = $('#pass').val();
				const repass = $('#repass').val();
				if (pass !== repass) {
					$('#errorMessage').text('两次输入的密码不一致，请重新输入。').css('color', 'red').show();
					return;
				}
				$("input[type=submit]").click(function() {
					$.ajax({
						url: "/user/regist",
						type: "post",
						data: {name: $("#name").val(), pass: $("#pass").val()},
						dataType: "text",
						success: function(response) {
							console.log("已向服务器发送注册请求");
						}
					});
				});
			});
		});
	</script>
</body>
</html>
